<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">设备管理</h2>
      <p class="text-gray-400">管理测试设备和服务器资源</p>
    </div>
    
    <div class="space-y-6">
      <!-- 设备统计 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="glass-effect rounded-xl p-6 tech-card text-center">
          <div class="text-2xl font-bold text-green-400 mb-2">{{ onlineDevices }}</div>
          <div class="text-gray-400">在线设备</div>
          <div class="flex items-center justify-center mt-2">
            <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
            <span class="text-green-400 text-sm">正常</span>
          </div>
        </div>
        <div class="glass-effect rounded-xl p-6 tech-card text-center">
          <div class="text-2xl font-bold text-red-400 mb-2">{{ offlineDevices }}</div>
          <div class="text-gray-400">离线设备</div>
          <div class="flex items-center justify-center mt-2">
            <span class="status-indicator offline w-2 h-2 bg-red-400 rounded-full mr-2"></span>
            <span class="text-red-400 text-sm">异常</span>
          </div>
        </div>
        <div class="glass-effect rounded-xl p-6 tech-card text-center">
          <div class="text-2xl font-bold text-yellow-400 mb-2">{{ busyDevices }}</div>
          <div class="text-gray-400">忙碌设备</div>
          <div class="flex items-center justify-center mt-2">
            <span class="status-indicator busy w-2 h-2 bg-yellow-400 rounded-full mr-2"></span>
            <span class="text-yellow-400 text-sm">执行中</span>
          </div>
        </div>
        <div class="glass-effect rounded-xl p-6 tech-card text-center">
          <div class="text-2xl font-bold cyber-text mb-2">{{ totalDevices }}</div>
          <div class="text-gray-400">总设备数</div>
        </div>
      </div>

      <!-- 设备列表 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-lg font-bold cyber-text flex items-center">
            <i class="fas fa-server mr-2"></i>设备列表
          </h3>
          <div class="flex items-center space-x-4">
            <input 
              v-model="searchQuery"
              type="text" 
              placeholder="搜索设备..." 
              class="px-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-tech-blue"
            >
            <router-link 
              to="/device/create"
              class="cyber-button px-4 py-2 text-white rounded-lg"
            >
              <i class="fas fa-plus mr-2"></i>添加设备
            </router-link>
          </div>
        </div>
        
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="border-b border-gray-700">
                <th class="text-left py-3 px-4 text-gray-300">设备名称</th>
                <th class="text-left py-3 px-4 text-gray-300">类型</th>
                <th class="text-left py-3 px-4 text-gray-300">状态</th>
                <th class="text-left py-3 px-4 text-gray-300">CPU使用率</th>
                <th class="text-left py-3 px-4 text-gray-300">内存使用率</th>
                <th class="text-left py-3 px-4 text-gray-300">最后更新</th>
                <th class="text-left py-3 px-4 text-gray-300">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr 
                v-for="device in filteredDevices"
                :key="device.id"
                class="border-b border-gray-700/50 hover:bg-gray-800/30 transition-colors"
              >
                <td class="py-3 px-4 text-white">{{ device.name }}</td>
                <td class="py-3 px-4 text-gray-400">{{ device.type }}</td>
                <td class="py-3 px-4">
                  <span class="flex items-center">
                    <span 
                      class="status-indicator w-2 h-2 rounded-full mr-2"
                      :class="getStatusClass(device.status)"
                    ></span>
                    <span :class="getStatusTextClass(device.status)">
                      {{ device.status }}
                    </span>
                  </span>
                </td>
                <td class="py-3 px-4">
                  <div class="flex items-center space-x-2">
                    <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden">
                      <div 
                        class="h-full rounded-full transition-all duration-500"
                        :class="getUsageColor(device.cpuUsage)"
                        :style="{ width: device.cpuUsage + '%' }"
                      ></div>
                    </div>
                    <span class="text-gray-400 text-sm">{{ device.cpuUsage }}%</span>
                  </div>
                </td>
                <td class="py-3 px-4">
                  <div class="flex items-center space-x-2">
                    <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden">
                      <div 
                        class="h-full rounded-full transition-all duration-500"
                        :class="getUsageColor(device.memoryUsage)"
                        :style="{ width: device.memoryUsage + '%' }"
                      ></div>
                    </div>
                    <span class="text-gray-400 text-sm">{{ device.memoryUsage }}%</span>
                  </div>
                </td>
                <td class="py-3 px-4 text-gray-400">{{ device.lastUpdated }}</td>
                <td class="py-3 px-4">
                  <div class="flex space-x-2">
                    <router-link 
                      :to="`/device/details/${device.id}`"
                      class="text-tech-blue hover:text-tech-purple transition-colors"
                      title="查看详情"
                    >
                      <i class="fas fa-eye"></i>
                    </router-link>
                    <button 
                      @click="editDevice(device)"
                      class="text-yellow-400 hover:text-yellow-300 transition-colors"
                      title="编辑设备"
                    >
                      <i class="fas fa-edit"></i>
                    </button>
                    <button 
                      @click="toggleDevice(device)"
                      class="transition-colors"
                      :class="device.status === '在线' ? 'text-orange-400 hover:text-orange-300' : 'text-green-400 hover:text-green-300'"
                      :title="device.status === '在线' ? '关闭设备' : '启动设备'"
                    >
                      <i :class="device.status === '在线' ? 'fas fa-power-off' : 'fas fa-play'"></i>
                    </button>
                    <button 
                      @click="deleteDevice(device.id)"
                      class="text-red-400 hover:text-red-300 transition-colors"
                      title="删除设备"
                    >
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'

interface Device {
  id: string
  name: string
  type: string
  status: string
  cpuUsage: number
  memoryUsage: number
  lastUpdated: string
}

const searchQuery = ref('')

const devices = reactive<Device[]>([
  {
    id: '1',
    name: '测试服务器-001',
    type: 'Linux Server',
    status: '在线',
    cpuUsage: 35,
    memoryUsage: 68,
    lastUpdated: '2分钟前'
  },
  {
    id: '2',
    name: '测试服务器-002',
    type: 'Windows Server',
    status: '在线',
    cpuUsage: 12,
    memoryUsage: 45,
    lastUpdated: '5分钟前'
  },
  {
    id: '3',
    name: 'Docker集群-001',
    type: 'Docker Container',
    status: '离线',
    cpuUsage: 0,
    memoryUsage: 0,
    lastUpdated: '1小时前'
  },
  {
    id: '4',
    name: '移动测试设备-001',
    type: 'Mobile Device',
    status: '忙碌',
    cpuUsage: 78,
    memoryUsage: 82,
    lastUpdated: '30秒前'
  }
])

const filteredDevices = computed(() => {
  if (!searchQuery.value) return devices
  
  return devices.filter(device => 
    device.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    device.type.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const onlineDevices = computed(() => 
  devices.filter(d => d.status === '在线').length
)

const offlineDevices = computed(() => 
  devices.filter(d => d.status === '离线').length
)

const busyDevices = computed(() => 
  devices.filter(d => d.status === '忙碌').length
)

const totalDevices = computed(() => devices.length)

const getStatusClass = (status: string) => {
  switch (status) {
    case '在线':
      return 'status-indicator online bg-green-400'
    case '离线':
      return 'status-indicator offline bg-red-400'
    case '忙碌':
      return 'status-indicator busy bg-yellow-400'
    default:
      return 'bg-gray-400'
  }
}

const getStatusTextClass = (status: string) => {
  switch (status) {
    case '在线':
      return 'text-green-400'
    case '离线':
      return 'text-red-400'
    case '忙碌':
      return 'text-yellow-400'
    default:
      return 'text-gray-400'
  }
}

const getUsageColor = (usage: number) => {
  if (usage >= 80) return 'bg-red-400'
  if (usage >= 60) return 'bg-yellow-400'
  return 'bg-green-400'
}

const editDevice = (device: Device) => {
  console.log('编辑设备:', device)
  // 实现编辑逻辑
}

const toggleDevice = (device: Device) => {
  const action = device.status === '在线' ? '关闭' : '启动'
  if (confirm(`确定要${action}设备 "${device.name}" 吗？`)) {
    device.status = device.status === '在线' ? '离线' : '在线'
    device.lastUpdated = '刚刚'
    
    if (device.status === '离线') {
      device.cpuUsage = 0
      device.memoryUsage = 0
    }
  }
}

const deleteDevice = (deviceId: string) => {
  if (confirm('确定要删除这个设备吗？此操作不可恢复。')) {
    const index = devices.findIndex(d => d.id === deviceId)
    if (index !== -1) {
      devices.splice(index, 1)
    }
  }
}
</script>

